<template>
  <div v-if="show" class="modal-overlay" @click="closeModal">
    <div class="modal-container" @click.stop>
      
      <div class="modal-content">
        <section class="section">
          <h3>1. 协议范围</h3>
          <p>本用户协议（以下简称"本协议"）是您与恒生电子股份有限公司（以下简称"恒生电子"或"我们"）之间关于KMS企业级知识库管理系统（以下简称"本系统"）使用所订立的协议。</p>
          <p>请您仔细阅读本协议，特别是免除或者限制责任的条款。如果您不同意本协议的任何条款，请不要使用本系统。</p>
        </section>

        <section class="section">
          <h3>2. 服务内容</h3>
          <p>本系统是基于大模型技术的企业级知识管理系统，主要功能包括：</p>
          <ul>
            <li>知识库的统一管理和存储</li>
            <li>智能问答和语义检索</li>
            <li>多轮对话支持</li>
            <li>个性化知识推荐</li>
            <li>知识库的初始化和管理</li>
            <li>用户权限管理</li>
          </ul>
        </section>

        <section class="section">
          <h3>3. 用户权利与义务</h3>
          <h4>3.1 用户权利</h4>
          <ul>
            <li>有权使用本系统提供的各项功能</li>
            <li>有权对系统功能提出意见和建议</li>
            <li>有权要求我们保护其个人信息安全</li>
            <li>有权在符合条件的情况下申请注销账户</li>
          </ul>

          <h4>3.2 用户义务</h4>
          <ul>
            <li>提供真实、准确、完整的注册信息</li>
            <li>妥善保管账户信息，不得将账户借给他人使用</li>
            <li>不得利用本系统从事违法违规活动</li>
            <li>不得上传、传播违法、有害、侵权内容</li>
            <li>遵守相关法律法规和本协议约定</li>
          </ul>
        </section>

        <section class="section">
          <h3>4. 知识产权</h3>
          <p>本系统的软件、技术、商标、版权等知识产权归恒生电子所有。用户仅获得本系统的使用权，不得进行反向工程、反编译、破解等行为。</p>
          <p>用户上传的知识内容，其知识产权归用户所有，但用户授权我们在提供服务范围内使用该内容。</p>
        </section>

        <section class="section">
          <h3>5. 隐私保护</h3>
          <p>我们重视用户隐私保护，具体内容请参见《隐私政策》。我们承诺：</p>
          <ul>
            <li>严格按照法律法规要求收集、使用用户信息</li>
            <li>采取技术和管理措施保护用户信息安全</li>
            <li>未经用户同意，不会向第三方披露用户信息</li>
            <li>用户有权查询、更正、删除个人信息</li>
          </ul>
        </section>

        <section class="section">
          <h3>6. 服务变更与终止</h3>
          <p>我们有权根据业务需要调整服务内容，并提前通知用户。在以下情况下，我们有权终止服务：</p>
          <ul>
            <li>用户违反本协议约定</li>
            <li>用户长期未使用系统（超过12个月）</li>
            <li>法律法规要求</li>
            <li>其他合理原因</li>
          </ul>
        </section>

        <section class="section">
          <h3>7. 免责声明</h3>
          <p>在法律允许的范围内，我们不对以下情况承担责任：</p>
          <ul>
            <li>因不可抗力导致的服务中断</li>
            <li>用户违规使用导致的损失</li>
            <li>第三方原因导致的数据丢失</li>
            <li>系统维护期间的临时中断</li>
          </ul>
        </section>

        <section class="section">
          <h3>8. 争议解决</h3>
          <p>本协议适用中华人民共和国法律。因本协议产生的争议，双方应友好协商解决；协商不成的，可向恒生电子所在地有管辖权的人民法院提起诉讼。</p>
        </section>

        <section class="section">
          <h3>9. 协议修改</h3>
          <p>我们有权根据法律法规变化和业务发展需要修改本协议。修改后的协议将在系统内公布，继续使用本系统即视为同意修改后的协议。</p>
        </section>

        <section class="section">
          <h3>10. 联系方式</h3>
          <p>如您对本协议有任何疑问，请联系我们：</p>
          <ul>
            <li>公司名称：恒生电子股份有限公司</li>
            <li>地址：浙江省杭州市滨江区江南大道3588号</li>
            <li>客服电话：400-888-8888</li>
            <li>邮箱：support@hundsun.com</li>
          </ul>
        </section>
      </div>
      
      <div class="modal-footer">
        <button class="agree-btn" @click="agreeAndClose">我已阅读并同意</button>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'agree'])

function closeModal() {
  emit('close')
}

function agreeAndClose() {
  emit('agree')
  emit('close')
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-container {
  background: white;
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  line-height: 1.6;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.modal-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.section {
  margin-bottom: 24px;
}

.section h3 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}

.section h4 {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 8px;
}

.section p {
  color: #4b5563;
  margin: 0 0 12px;
  font-size: 14px;
}

.section ul {
  margin: 8px 0;
  padding-left: 20px;
}

.section li {
  color: #4b5563;
  margin: 6px 0;
  font-size: 14px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

.agree-btn {
  background: linear-gradient(135deg, #10b981, #22c55e);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.agree-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}


@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 768px) {
  .modal-overlay {
    padding: 10px;
  }
  
  .modal-container {
    max-height: 95vh;
  }
  
  
  .modal-content {
    padding: 20px;
  }
  
  .modal-footer {
    padding: 12px 20px;
    flex-direction: column;
  }
  
  .agree-btn,
  .cancel-btn {
    width: 100%;
  }
}
</style>
